<template>
<div class="record-con">
    <div class="title clear">
        <i class="iconfont icon-icon_arrow_left" />
        <span>个人中心</span>
    </div>

    <div class="mform">
        <h1>人数统计</h1>

        <form style="border:1px solid red;">
            <div class="team">
                <van-field readonly clickable label="城市" :value="value1" placeholder="选择城市" @click="mqinAi1" />
                <div v-if="myIf1">
                    <van-popup v-model="showPicker" position="bottom">
                        <van-picker title="请选择城市" show-toolbar :columns="columns1" @cancel="showPicker = false" @confirm="onConfirm1" />
                    </van-popup>
                </div>
            </div>

            <div class="group-leader flexbox">
                <van-field readonly clickable label="组长" :value="value2" placeholder="选择组长" @click="mqinAi2" />
                <div v-if="myIf2">
                    <van-popup v-model="showPicker" position="bottom">
                        <van-picker title="请选择组长" show-toolbar :columns="columns2" @cancel="showPicker = false" @confirm="onConfirm2" />
                    </van-popup>
                </div>
            </div>

            <div class="num flexbox">
                <van-field readonly clickable label="组总人数:" :value="value3" placeholder="选择组长" @click="mqinAi3" />
                <div v-if="myIf3">
                    <van-popup v-model="showPicker" position="bottom">
                        <van-picker title="请选择组长" show-toolbar :columns="columns3" @cancel="showPicker = false" @confirm="onConfirm3" />
                    </van-popup>
                </div>
            </div>

            <div class="num-real flexbox">
                <van-field readonly clickable label="实到人数:" :value="value4" placeholder="选择组长" @click="mqinAi4" />
                <div v-if="myIf4">
                    <van-popup v-model="showPicker" position="bottom">
                        <van-picker title="请选择组长" show-toolbar :columns="columns4" @cancel="showPicker = false" @confirm="onConfirm4" />
                    </van-popup>
                </div>
            </div>

            <div class="real-name flexbox">
                <van-field readonly clickable label="实到人员名单:" :value="value5" placeholder="选择组长" @click="mqinAi5" />
                <div v-if="myIf5">
                    <van-popup v-model="showPicker" position="bottom">
                        <van-picker title="请选择组长" show-toolbar :columns="columns5" @cancel="showPicker=false" @confirm="onConfirm5" />
                    </van-popup>
                </div>
            </div>
        </form>

    </div>
</div>
</template>

<script>
import Vue from 'vue';
import {
    Picker
} from 'vant';
import {
    Popup
} from 'vant';
Vue.use(Popup);
Vue.use(Picker);
export default {
    name: '',
    components: {},
    props: {},
    data() {
        return {
            myIf1: false,
            myIf2: false,
            myIf3: false,
            myIf4: false,
            myIf5: false,
            value1: '',
            value2: '',
            value3: '',
            value4: '',
            value5: '',

            showPicker: false,

            columns1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
            columns2: ['组长1', '组长1', '组长1', '组长1', '组长1'],
            columns3: ['组长2', '组长2'],
            columns4: ['组长3', '组长3'],
            columns5: ['组长5', '组长5']
        }
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
        onConfirm1(e) {
            this.value1 = e
            this.showPicker = false
        },
        onConfirm2(e) {
            this.value2 = e
            this.showPicker = false
        },
        onConfirm3(e) {
            this.value3 = e
            this.showPicker = false
        },
        onConfirm4(e) {
            this.value4 = e
            this.showPicker = false
        },
        onConfirm5(e) {
            this.value5 = e
            this.showPicker = false
        },
        mqinAi1() {
            this.myIf1 = true
            this.myIf2 = false
            this.myIf3 = false
            this.myIf4 = false
            this.myIf5 = false
            this.showPicker = true
        },
        mqinAi2() {
            this.myIf1 = false
            this.myIf2 = true
            this.myIf3 = false
            this.myIf4 = false
            this.myIf5 = false
            this.showPicker = true
        },
        mqinAi3() {
            this.myIf1 = false
            this.myIf2 = false
            this.myIf3 = true
            this.myIf4 = false
            this.myIf5 = false
            this.showPicker = true
        },
        mqinAi4() {
            this.myIf1 = false
            this.myIf2 = false
            this.myIf3 = false
            this.myIf4 = true
            this.myIf5 = false

            this.showPicker = true
        },

        mqinAi5() {
            this.myIf1 = false
            this.myIf2 = false
            this.myIf3 = false
            this.myIf4 = false
            this.myIf5 = true
            this.showPicker = true
        }
    }
}
</script>
